<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="webjars/jquery-ui/1.12.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="webjars/jquery-ui/1.12.1/themes/redmond/theme.css">
<link rel="stylesheet" href="jqGrid/css/ui.jqgrid.css">
<script type="text/javascript" src = "jqGrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src = "jqGrid/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src = "jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src = "jqGrid/js/grid.locale-cn.js"></script>
<style type="text/css">
	.ui-jqgrid .ui-jqgrid-view{
		font-size: 16px;
	}
</style>
</head>
<body>
	<table id = "list"></table>
	<div id = "dhl"></div>
	
<script type="text/javascript">
	$("#list").jqGrid({
		url	:'list',  //地址
		editurl: 'edit',   //增删改请求地址
		caption: '班级列表', //表标题
		altRows : true,
		//autowidth: true,   //自动宽度
		width: 1000,   //宽度
		height: 'auto',  //高度
		datatype : 'json',   //类型
		mtype : 'post', //提交请求方式
		rowNum : 10,   //分页，每页显示记录的行数
		rowList : [3,5,10,25,50],   //设置允许改变的行数
		prmNames : { search : 'search'},     //参数
		sortname : 'id',		//排序字段名字
		viewrecords : true,   //显示记录总数
		pager: '#dhl',			//给出导航栏地址
		jsonReader: {		//接收对象，规定返回值类型
			repeatitems : false,
			id : 'id'   //主键
		},
		colModel:[   
			{name: 'id', label: '序号', index: 'id', align: 'center', sopt: ['cn'], width: 50, sorttype: 'int'},   //search是否可以查找，sorttype排序类型，数据类型
			{name: 'name', label: '班级名字', index: 'name', width: 150, sorttype: 'text', editable: true},    //editable添加修改文本框
			{name: 'teacher', label: '班主任', index: 'teacher', width: 100, sorttype: 'text', editable: true}
		]  
	});
	
	$("#list").jqGrid('navGrid', '#dhl', {    //edit修改， add添加，del删除, view纵向查看视图
		edit : true,
		add : true,
		del : true,
		view : true
	}, {
		top: 200,
		savekey: [true, 13],
		closeAfterAdd: true,
		left: 636
	}, {			//add新增窗口位置
		modal:true,    //定义模态框，点击空白不能关闭
		//url: 'add',    //更改地址
		top: 200,
		left: 636,
		savekey: [true, 13],    //设置热键，13回车键
		closeAfterAdd: true     //添加完了，窗口自动关闭
	}, {
		top: 200,
		left: 636
	}, {
		top: 200,
		left: 536,
		multipleSearch:true    //多条件查询
	});
</script>
</body>
</html>